<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

    <script type="text/javascript" src="/js/rem.js"></script>
    <%--<link rel="stylesheet" href="/layui/css/layui.css">--%>
    <link rel="stylesheet" href="/css/style.css">
    <script src="/js/iftmonitor/ezuikit.js"></script>
    <title>智慧农业云服务数据展示</title>
    <style>
        .container {
            visibility: visible;
            height: 100%;
            width: 100%;
        }
        .pop-up {
            visibility: visible;
            height: 93%;
            width: 93%;
        }
        .pop-charts {
            width: 60%;
            top: 1.6rem;
            left: 5.8rem;
            bottom: 0.5rem;
        }
        .select-box > ul, .select-pop > ul {
            width: auto;
        }
        .select-box > ul > li, .select-pop > ul > li {
            width: auto;
            padding: 0 2px;
        }
        #vedio-display-box {
            width: 30%;
            border: 1px solid #0E94EA;
            height: 30%;
            position: absolute;
            top: 2.0em;
            background: #000;
        }
        .vedio-display {
            font-size: 0.5em;
        }
        .left-chart {
            width: 30%;
            /*border: 1px solid #0E94EA;*/
            height: 30%;
            position: absolute;
            top: 5.5em;
        }
        .title-box {
            width: 11rem;
            height: 0.52rem;
        }
        .left-title-box {
            width: 5.6rem;
        }
        #filCon {
            top: 0.62em;
        }
        .loading-gif {
            display: inline-block;
            background: url(/img/loading-2.gif) no-repeat;
            background-position-x: 0%;
            background-position-y: 0%;
            width: 170px;
            height: 86px;
            margin-top: 20%;
            background-position: 10px -40px;
        }
        video{
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body style="overflow: hidden;">
<div class="container" style="visibility: visible;">
    <div class="pop-up" style="visibility: visible;">
        <span class="close-pop" id="close-pop"></span>
        <h2 class="title" id="barTitles">当前场景:-</h2>
        <div class="filter-con pop-filters" style="display:flex" data-type="4">
            <div class="select-pop" tabindex="0" hidefocus="true">
                <ul id="barTypes">
                    <%--<li class="active" data-value="1">小型气象站--2076</li>
                    <li data-value="2">小型气象站--907</li>--%>
                </ul>
            </div>
        </div>
        <div id="vedio-display-box">

        </div>

        <div class="left-chart">
            <div class="title-box left-title-box" >
                <h6>最高最低含氧量</h6>
                <img class="line-img" src="/img/line-blue.png" alt="">
                <button id="filBtn"><img src="/img/select_icon.png" alt="">筛选</button>
            </div>
            <div class="filter-con" id="filCon" data-type="1">
                    <div class="select" tabindex="0" hidefocus="true">
                        <div class="select-div" id="selected">
                            检测项
                        </div>
                        <ul class="select-ul" id="check-item-list">
                            <%--<li class="active" data-value="1">氧气</li>
                            <li data-value="2">太阳辐射</li>--%>
                        </ul>
                    </div>
            </div>
            <div id="barchart-box">
                <%--<div id="barchart" style="width:100%;height:90%;height: 100%;border: 1px solid #0E94EA;margin-top: 0.1em;"></div>--%>

            </div>
        </div>
        <div class="chart-box-container">
            <div class="chart-box pop-charts">
                <div class="title-box">
                    <h6>监测项变化趋势</h6>
                </div>
                <div style="width: 100%;height: 100%;text-align: center;" id="loading">
                    <div class="loading-gif"></div>
                </div>
                <div id="linechart" style="width:100%;height:90%;"></div>
            </div>
        </div>

    <!--<div class="pop-data">
        <div class="city-data">
            <div class="city-box">
                <p id="titleQs"><span>全网</span>到珠海</p>
                <ul class="city-btn" data-city="2">
                    <li class="active">全网</li>
                    <li>ABCDE</li>
                    <li>FGHIJ</li>
                    <li>KLMNO</li>
                    <li>PQRST</li>
                    <li>UVWXYZ</li>
                </ul>
                <ul class="city-div" id="citys">

                </ul>
            </div>
            <ul class="ranking-box">
                <li><span></span>
                    <p>城市</p>
                    <p>派件</p>
                </li>
                &lt;!&ndash;                        <li><span>1</span><p>上海</p><p>1sss25(万件)</p></li>&ndash;&gt;
            </ul>

        </div>
    </div>-->
</div>
</div>
<script type="text/javascript" src="/js/jquery-3.3.1.js"></script>
<script src="/layui/layui.js"></script>
<script type="text/javascript" src="/echarts/echarts.min.js"></script>
<script src="/js/iftmonitor/scene-show.js"></script>
<script>
    layui.use(['layer','jquery'],function() {
        var form = layui.form,
            element = layui.element;
        $ = layui.$;
        var layer = parent.layer === undefined ? layui.layer : top.layer;
        $("#close-pop").click(function () {
            layer.closeAll();
        });
    });
    //视频播放
    var player = new EZUIPlayer('myPlayer');
    player.on('error', function(){
        console.log('error');
    });
    player.on('play', function(){
        console.log('play');
    });
    player.on('pause', function(){
        console.log('pause');
    });
</script>
</body>
</html>

